<template>
	<el-row :gutter="20">
		<el-col :span="12">
			<div class="grid-content bg-purple">
				<div class="top-title student-info">
					<b></b>
					<span class="title">待办事项</span>
				</div>
				<div class="order-hint">
					<div class="order-message">
						<div class="yuan">
							<img src="../../../assets/images/home/main-yuanquan.png" alt="" />
							<img src="../../../assets/images/home/main-lanse.png" class="position" alt="" />
							<span class="order-num">{{ waitPayCount }}</span>
						</div>
						<p class="order-text">待付款订单</p>
					</div>
					<div class="order-message">
						<div class="yuan">
							<img src="../../../assets/images/home/main-yuanquan.png" alt="" />
							<img src="../../../assets/images/home/main-hongse.png" class="position" alt="" />
							<span class="order-num">{{ waitConfirmCount }}</span>
						</div>
						<p class="order-text">待确认订单</p>
					</div>
					<div class="order-message">
						<div class="yuan">
							<img src="../../../assets/images/home/main-yuanquan.png" alt="" />
							<img src="../../../assets/images/home/main-huangse.png" class="position" alt="" />
							<span class="order-num">{{ waitBackCount }}</span>
						</div>
						<p class="order-text">待回复客户</p>
					</div>
				</div>
			</div>
		</el-col>
		<el-col :span="12">
			<div class="grid-content bg-purple">
				<div class="top-title student-info">
					<b></b>
					<span class="title">课程信息</span>
				</div>
				<div class="subject">
					<SubjectInfo></SubjectInfo>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
import SubjectInfo from "./SubjectInfo.vue";
import request from "../../../api/home";
export default {
	name: "SectionThree",
	components: {
		SubjectInfo,
	},
	data() {
		return {
			waitPayCount: "",
			waitConfirmCount: "",
			waitBackCount: "",
		};
	},
	mounted() {
		request.getOrderData().then((res) => {
			if (res.code == 200 && res.success == 0) {
				this.waitPayCount = res.data.waitPayCount;
				this.waitConfirmCount = res.data.waitConfirmCount;
				this.waitBackCount = res.data.waitBackCount;
			}
		});
	},
};
</script>

<style lang="less" scoped>
.grid-content {
	height: 200px;
}
.order-hint {
	display: flex;
	justify-content: space-between;
	.order-message {
		.yuan {
			position: relative;
			margin-bottom: 10px;
			img {
				display: block;
			}
			.position {
				position: absolute;
				top: 0;
				right: 0;
			}
			.order-num {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 50px;
			}
		}
		.order-text {
			font-weight: bold;
			font-size: 16px;
		}
	}
}
</style>
<style>
.subject .el-table td,
.subject .el-table th.is-leaf,
.subject .el-table--border,
.subject .el-table--group {
	border: none;
	cursor: pointer;
}
.subject .el-table::before {
	height: 0;
}
</style>
